@prefix-modal: ~'@{nameSpace}-modal';

.@{prefix-modal} {
  @keyframes modal-body-keyframes {
    from {
      transform: scale(0.6, 0.6)
    }

    to {
      transform: scale(1, 1)
    }
  }

  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;

  .@{prefix-modal}-main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;

    .@{prefix-modal}-body {
      color: var(--design-neutral-color);
      position: relative;
      max-width: calc(100vw - 200px);
      max-height: 100vh;
      background-color: var(--design-bg-color-4);
      border-radius: var(--design-border-radius-lg);
      box-shadow: 0 0 10px var(--design-shadow-color);

      .@{prefix-modal}-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        transition: color 0.3s;
        .cursor-pointer();

        &:hover {
          color: var(--design-text-color-4);
        }
      }

      .@{prefix-modal}-header {
        font-size: 18px;
        font-weight: 500;
        padding: 0 20px;
        min-height: 60px;
        .flex();
        .align-center();
        color: var(--design-base-color);
      }

      .@{prefix-modal}-container {
        padding: 20px;
        max-height: calc(100vh - 200px);
      }

      .@{prefix-modal}-footer {
        min-height: 60px;
        .flex();
        .align-center();
        gap: 10px;
        padding: 0 20px;
      }

      .@{prefix-modal}-footer-border {
        border-top: var(--design-border-sm) solid var(--design-border-color-2);
      }
    }

    .@{prefix-modal}-body-border {
      border: var(--design-border-sm) solid var(--design-border-color-2);
    }
  }

  .@{prefix-modal}-main-animation {
    animation: modal-body-keyframes 0.3s;
  }

}